<script lang="ts" setup>
import { links } from '@/utils/constants';
</script>
<template>
  <div class="platform-case">
    <h1 class="title">平台案例</h1>
    <div class="content">
      <div class="left">
        <div class="logo">
          <img src="~@/assets/web/svgs/gitlink-logo.svg" alt="">
        </div>
        <p>
          GitLink是中国计算机协会官方指定的开源创新服务平台，提供分布式协作开发、一站式过程管理、多层次代码分析、多维度用户画像等功能。</p>
        <p>
          建木价值：通过为GitLink提供DevOps引擎，打通编码、测试、构建、部署等开发运维环节，帮助开发者提高开发效率和交付质量。</p>
        <a :href="links.Gitlink" target="_blank" class="special"><i class="icon"/>立即体验</a>
      </div>
      <div class="right">
        <img src="~@/assets/web/pngs/platform-case-demo.png" alt="">
      </div>
    </div>
  </div>
</template>


<style scoped lang="less">
.platform-case {
  padding-top: 80px;
  width: 100%;
  height: 641px;
  box-sizing: border-box;
  background: url("@/assets/web/svgs/platform-bg.svg") 100% no-repeat;

  .title {
    text-align: center;
    margin-bottom: 84px;
    font-size: 32px;
    font-weight: 600;
    color: #042749;
  }

  .content {
    display: flex;
    box-sizing: border-box;
    padding: 0 40px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;

    .left {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .logo {
        width: 202px;
        height: 39px;

        img {
          width: 100%;
        }
      }

      p {
        flex: 1;
        font-size: 16px;
        font-weight: 400;
        color: #042749;
        max-width: 500px;
        line-height: 30px;

        &:nth-child(2) {
          margin: 30px 0 20px;
        }
      }

      a {
        cursor: pointer;
        width: 144px;
        height: 44px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-radius: 4px;
        justify-content: center;
        margin: 44px auto 0;

        .icon {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }

        &.special {
          color: #FFFFFF;
          background-color: #042749;

          &:hover {
            background-color: #123757;
          }

          .icon {
            background: url("@/assets/web/svgs/btn-icon-2-link.svg") no-repeat;
            background-size: 100%;
          }
        }
      }
    }

    .right {
      flex-shrink: 0;
      margin-left: 48px;
      width: 671px;
      height: 362px;
      box-shadow: 0px 0px 40px 0px #E3E3E3;

      img {
        width: 100%
      }
    }
  }

}
</style>
